<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
	<style>
		/*全部*/
		body li{list-style-type:none;}
		/*头部*/
		header{height:150px;background:#ABCDEF;} 
		nav{height:40px;background:#c0c0c0;width:90%;margin:80px 0 0 5%;}
		nav ul li{height:27px;width:100px;background:#408080;float:left;margin:4px 0 0 2px;color:#fff;padding-top:5px;text-align:center;}
		/*内容*/
		div{height:1000px;margin:10px 0 10px 0;}
		section{float:left;height:1000px;background:#ff8000;;width:60%;}
		article{height:150px;width:90%;color:#fff;background:#8080ff;margin-left:5%;pardin-top:10px;padding-top:10px;text-align:center;}
		aside{float:right;height:1000px;background:#008000; width:35%;}
		hgroup{background:#00ff00;height:400px;width:95%;margin:10px 0 0 2%;color:#fff;}
		hgroup h3{background:#ff80c0;height:30px;width:95%;float:left;margin:5px 0 0 2%;padding:5px 0 0 5px;}
		/*尾部*/
		footer{height:100px;background:#8000ff;clear:both;}
	</style>	
</head>
<body>
	<header>
		<p>这是HEADER标签</p>
		<nav>
			<ul>
				<li>目录1</li>
				<li>目录2</li>
				<li>目录3</li>
				<li>目录4</li>
				<li>目录5</li>
			</ul>
		</nav>
	</header>
	<div>
		<section>
			<p>这是SECTION标签</p>
			<article>
				<h2>标题1</h2>
				<hr>
				<p>值得注意的是，如果在CSS里面定义了BODY的样式，请注意在CSS里面定义。<br>不要直接在<body>代码里加入</p>
			</article>
			<hr>
			<article>
				<h2>标题2</h2>
				<hr>
				<p>值得注意的是，如果在CSS里面定义了BODY的样式，请注意在CSS里面定义。<br>不要直接在<body>代码里加入</p>
			</article>
			<hr>
			<figure>
				<figcaption>figure标题1</figcaption>
				<p>figure内嵌套figcaption标签</p>
			</figure>
			<hr>
			<figure>
				<dt>figure标题1</dt>
				<dd>figure内嵌套figcaption标签</dd>
			</figure>
			<hr>
			<dialog>
				<dt>dialog标题</dt>
				<dd>dialog是一个类似微信的对话标签</dd>
				<dt>我来问1</dt>
				<dd>我来问的内容1</dd>
				<dt>我来答1</dt>
				<dd>我来答的内容1</dd>
				<dt>我在来问2</dt>
				<dd>我在来答的内容2</dd>
			</dialog>
			<hr>
			<menu>
				<li>点击</li>
				<li>右键单击</li>
			</menu>
			<hr>
			<span contextmenu='menuitem_id'>单击我试试</span>
			<menu type="context" id="menuitem_id">
				<menuitem label="菜单一" onclick="alert('这是菜单1');" icon="http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif"></menuitem>
			</menu>
			<hr>
			<meter min="0" max="100" value='8' low="10" high='70' id="meter_id"></meter>
			<br>
			<progress max="100" value="20" id="pro"></progress>
			<script>
				setInterval(function (){
					var o = document.getElementById('pro');
					if(o.value >= 100){
						o.value = 0;
					}else{
						o.value += 1;
					}
				},40);
			</script>
			<hr>
			<details>
				<dt>问题1</dt>
				<dd>回答问题内容</dd>
			</details>
			<hr>
			<ruby>夼<rp>(</rp><rt>kuang</rt><rp>)</rp></ruby>
			<hr>
			<mark>HTML5</mark>第一实例文档，测试<mark>mark</mark>标签。看看好不好用。
		</section>
		<aside>
			<p>这是ASIDE标签</p>
			<hgroup>
				<h3>左标题1</h3>
				<h3>左标题1</h3>
				<h3>左标题1</h3>
				<h3>左标题1</h3>
				<h3>左标题1</h3>
				<h3>左标题1</h3>
			</hgroup>
		</aside>
	</div>
	<footer>
		<p>这是FOOTER标签</p>	
		<hr>
		<small>联系我们</small><small>合作伙伴</small><small>联系我们</small><small>合作伙伴</small><small>联系我们</small><small>合作伙伴</small>
	</footer>
</body>
</html>